<!DOCTYPE html>
<html>

<head>
  <title>Vue.js 入门</title>
</head>

<body>
  <!-- 1、准备容器 -->
  <div id="app">
    {{ message }}
    <p>
      {{ message.toUpperCase() }}
    </p>
    <p>
      {{ message + '你好'}}
    </p>
    <p>
      {{ age >18 ? '大于18':'小于18'}}
    </p>
    <p>
      {{ friend.like}}
    </p>
  </div>

  <!-- 2、引入Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>
  <script>
    // Vue 实例 在全局环境，就有了Vue构造函数
    const app = new Vue({
      // 通过el 配置选择器
      el: '#app',
      data: {
        message: 'Hello Vue!',
        age: 30,
        friend:{
          name: 'jack',
          like: 'dog'
        }
      }
    });
  </script>
</body>

</html>